<!--
 * @Author: Li Zengkun
 * @Date: 2022-09-23 19:10:35
 * @LastEditors: Li Zengkun
 * @LastEditTime: 2022-09-25 14:21:50
 * @Description: 
-->
<template>
  <div ref="mainRef">
    <div>
      <el-card shadow="hover" v-if="res.status">
        <template #header>
          <h1 class="header">{{ articleDetail.title }}</h1>
          <p class="time">
            <el-icon><Calendar /></el-icon>
            {{ articleDetail.create_time }}
          </p>
        </template>
        <el-image class="main_photo" :src="articleDetail.main_photo" />
        <div v-html="articleDetail.content" class="text-content"></div>
      </el-card>
      <br />
      <el-card class="comment-box">
        <h2 ref="commentTitleRef">发表评论</h2>
        <div class="comment" style="border: none">
          <el-avatar>{{ store.state.User.user.nickname }}</el-avatar>
          <el-input
            v-model="commentContent"
            placeholder="Please input comment"
            type="textarea"
            :autosize="{ minRows: 3 }"
            :rows="2"
            :resize="false"
            input-style="font-size:16px"
          />
        </div>
        <p style="text-align: right">
          <el-button
            type="warning"
            @click="commentContent = ''"
            :disabled="commentContent === ''"
            >清空</el-button
          >
          <el-button
            type="primary"
            @click="handleComment"
            :disabled="commentContent === ''"
            >发表评论</el-button
          >
        </p>
        <el-divider></el-divider>
        <h2>评论</h2>
        <ul>
          <li class="comment" v-for="item in commentList" :key="item.id">
            <el-avatar>{{ item.user_nickname }}</el-avatar>
            <div class="text">
              <div class="name">
                <span>
                  {{ item.user_nickname }}
                </span>
                <span class="time">{{ item.create_time }}</span>
              </div>
              <p class="comment-content">{{ item.content }}</p>
              <!-- <p>
                <el-button link icon="Pointer" class="">点赞</el-button>
                <el-button
                  @click.stop="isReplyShow = item.id"
                  link
                  icon="ChatDotSquare"
                  class="reply-link"
                  >回复</el-button
                >
              </p> -->
              <div v-if="isReplyShow === item.id" class="reply-box">
                <el-input
                  v-model="replyContent"
                  :placeholder="`回复 ${item.user_nickname} :`"
                  type="textarea"
                  :autosize="{ minRows: 2 }"
                  :rows="1"
                  :resize="false"
                  input-style="font-size:16px"
                />
                <p style="text-align: right; margin-top: 10px">
                  <el-button
                    type="primary"
                    @click="handleReply(item.id)"
                    :disabled="replyContent === ''"
                    >回复评论</el-button
                  >
                </p>
              </div>
              <div class="reply-main comment" v-if="item.reply">
                <el-avatar>admin</el-avatar>
                <div class="text">
                  <div class="name">
                    <span>管理员</span>
                    <span class="time">{{ item.reply_date }}</span>
                  </div>
                  <div class="comment-content">
                    {{ item.reply }}
                  </div>
                </div>
              </div>
            </div>
          </li>
        </ul>
      </el-card>
    </div>

    <div class="fixed-box">
      <el-tooltip
        class="box-item"
        effect="dark"
        content="返回"
        placement="left"
      >
        <el-button
          @click="router.go(-1)"
          type="warning"
          circle
          icon="Back"
          size="large"
        ></el-button>
      </el-tooltip>
      <el-tooltip
        class="box-item"
        effect="dark"
        content="评论"
        placement="left"
      >
        <el-button
          @click="toComment"
          type="success"
          circle
          icon="comment"
          size="large"
        ></el-button>
      </el-tooltip>
      <el-tooltip
        class="box-item"
        effect="dark"
        content="返回顶部"
        placement="left"
      >
        <el-button
          @click="backTop"
          type="primary"
          circle
          icon="Top"
          size="large"
        ></el-button>
      </el-tooltip>
    </div>
  </div>
</template>
 
<script setup>
import { ref, reactive } from "vue";
import { article, comment } from "@/api";
import { useRoute, useRouter } from "vue-router";
import { useStore } from "vuex";

const store = useStore();
const route = useRoute();
const router = useRouter();

const id = route.params.id;
const res = await article.detail({ id });
const articleDetail = res.data;
const commentContent = ref("");

const commentList = ref((await comment.list({ id })).data);

const handleComment = async () => {
  let { status, msg, data } = await comment.release({
    article_id: id,
    content: commentContent.value,
  });
  if (status) {
    commentList.value = (await comment.list({ id })).data;
    commentContent.value = "";
  }
};

const commentTitleRef = ref(null);
const toComment = () => {
  window.scrollTo({
    top: commentTitleRef.value.getBoundingClientRect().top - 40,
    behavior: "smooth",
  });
};

const mainRef = ref(null);

const backTop = () => {
  window.scrollTo({
    top: 0,
    behavior: "smooth",
  });
};

const replyContent = ref("");

const isReplyShow = ref(0);

const handleReply = (id) => {};
</script>

<style  scoped>
@media only screen and (max-width: 768px) {
  .content {
    width: 100%;
  }
}
.header {
  font-size: 40px;
}
.main_photo {
  width: 100%;
}
.time {
  color: var(--el-color-info);
}

.text-content {
  font-family: "Courier New", Courier, monospace;
  font-family: "Franklin Gothic Medium", "Arial Narrow", Arial, sans-serif;
  font-size: 16px;
}
.text-content >>> p {
  margin: 20px 0 !important;
  line-height: 40px !important;
}
.text-content >>> h1,
.text-content >>> h2,
.text-content >>> h3,
.text-content >>> h4,
.text-content >>> h5,
.text-content >>> h6 {
  margin: 30px 0 10px 0;
  font-weight: 900;
}

.fixed-box {
  position: fixed;
  bottom: 40px;
  right: 40px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.fixed-box .el-button {
  margin-left: 0;
}
.fixed-box .box-item {
  width: 110px;
  margin-top: 10px;
}
.comment-box h2 {
  margin-bottom: 20px;
}
.comment {
  display: flex;
  gap: 20px;
  margin-bottom: 20px;
  margin-top: 20px;
  padding-bottom: 10px;
  border-bottom: 1px var(--el-color-info-light-7) dashed;
}
.comment .name {
  /* line-height: 40px; */
  margin-bottom: 10px;
  display: flex;
  justify-content: space-between;
}
.comment .text {
  flex: 1;
}
.comment .time {
  color: var(--el-color-info);
  margin-left: 20px;
}
.comment .comment-content {
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  color: var(--el-text-color-regular);
  margin-bottom: 5px;
}
.comment .reply-box {
  margin-top: 10px;
  overflow: hidden;
  /* animation: reply-box .3s ease-out; */
  /* animation-fill-mode: forwards; */
}

.comment .reply-main {
  border-bottom: none;
  height: auto;
  width: 100%;
  margin-top: 10px;
  padding: 10px;
  border-radius: 5px;
  background: var(--el-color-primary-light-9);
}
@keyframes reply-box {
  0% {
    height: 0;
  }
  100% {
    height: auto;
  }
}
</style>

